import React, { Component,createRef } from 'react'
import '../assets/css/register.scss'
/* 
    createRef获取DOM元素的步骤
    1、导入createRef函数
    import {createRef} from 'react'
    2、在构造函数中调用createRef函数，然后将结果作为this实例上的一个属性
    constructor(props){
      super(props)
    this.boxRef=createRef()
    }
    3、在要操作的DOM元素上使用ref属性来引用它
    <div ref={this.boxRef} onClick={this.changeBox}></div>
    4、然后操作DOM元素
    changeBox=()=>{
    console.log('boxRef',this.boxRef.current);
    this.boxRef.current.style.backgroundColor="#f00"
  }

*/
export default class Register extends Component {
  constructor(props){
    super(props)
    this.boxRef=createRef()
  }
  changeBox=()=>{
    console.log('boxRef',this.boxRef.current);
    this.boxRef.current.style.backgroundColor="#f00"
  }
  render() {
    return (
      <div>
         <div className='box' ref={this.boxRef} onClick={this.changeBox}></div>
      </div>
    )
  }
}
